<!-- 图片轮播组件
要求：
自动轮播图片（每3秒切换）
左右按钮可手动切换
图片使用div占位即可 -->
<template>
  <div class="container">
    <div class="lunbo"></div>
    <div
      v-for="(item, index) in images"
      :key="index"
      class="image-item"
      :class="{ active: currentIndex === index }"
    >
      <div class="image"></div>
    </div>
    <button @click="buttonleft"></button>
    <button @click="buttonright"></button>
  </div>
</template>
<script setup>
const  = ref([{ locimagesalhost }, {}]);
const currentIndex = ref(0);
const ifmanual = false;
let timer = null;
const buttonleft = () => {
  ifmanual = true;
  currentIndex.value = currentIndex.value - 1;
  closeTimer();
  reset();
};
const buttonright = () => {
  ifmanual = true;
    currentIndex.value = currentIndex.value + 1;
  closeTimer();
  reset();
};
const autoshow = () => {
  ifmanual = false;
  timer = setInterval(() => {
    if (!ifmanual) {
      buttonright();
    }
  }, 3000);
};
const reset = () => {
  closeTimer();
  autoshow();
};
const closeTimer = () => {
  if (timer) {
    clearInterval(timer);
  }
};

//自动轮播跟手动如何兼容 如果自动到两秒 手动如何计算

onMounted(() => {
  autoshow();
});

</script>
<style>
.image-item {
  display: none;
}
.active {
  display: block;
}
</style>
